{extend name='layout/app' /}

{block name='css'}
<link rel="stylesheet" href="__STATIC__/css/pwd-update.css">
{/block}

{block name='content'}
<div id="app">
    <div class="nav">
        <i class="el-icon-arrow-left icon_left" @click="back"></i>
        <div>支付密码设置</div>
        <i class="iconfont icon-home icon_right" @click="home"></i>
    </div>


    <div class="reg-area" style="margin-top: 41px;padding-top: 40px;">
        <div class="reg-item">
            <el-input
                    placeholder="请输入手机号码"
                    prefix-icon="iconfont icon-phone"
                    v-model="phone" clearable id="phone" disabled>
            </el-input>
            <div class="tips"></div>
        </div>

        <div class="reg-item captcha-item">
            <el-input
                    placeholder="请输入验证码"
                    prefix-icon="iconfont icon-securityCode-b"
                    v-model="captcha" clearable id="captcha">
            </el-input>
            <el-button type="plain" @click="getCaptcha" class="get-captcha">获取验证码</el-button>
            <div class="tips" id="captchaErr"></div>
        </div>

        <div class="reg-item">
            <el-input @input="checkPaypwd"
                    placeholder="请输入6位支付密码"
                    prefix-icon="iconfont icon-lock"
                    v-model="paypwd" clearable id="paypwd" show-password maxlength="6">
            </el-input>
            <div class="tips" id="paypwdErr"></div>
        </div>

        <!--<div class="reg-item">
            <el-input
                    type="password"
                    placeholder="请输入新密码"
                    prefix-icon="iconfont icon-queren"
                    v-model="repwd" clearable>
            </el-input>
            <div class="tips"></div>
        </div>-->

    </div>


    <div class="btn-area">
        <div class="order">
            <el-button type="primary" round @click="btnReg">确认修改</el-button>
        </div>
    </div>
</div>
{/block}

{block name='footer'}{/block}

{block name='js'}
<script>
    var that
    new Vue({
        el:'#app',
        data: {
            phone: '{$Think.session.user.phone|substr=0,3}****{$Think.session.user.phone|substr=-4,4}',
            captcha: '',
            paypwd: '',
            codeStatus: true
        },
        mounted() {
            that = this  //生成vue副本
        },
        methods: {
            back() {
                window.history.go(-1)
            },
            home() {
                location.href = '/'
            },
            getCaptcha() {
                if(!this.codeStatus) {
                    return
                }
                $('#phone').parents('.reg-item').find('.tips').html('')
                $.post('/api/sms/getCaptcha',{beSender: true},function (res) {
                    console.log(res)
                    if(res.code === 0) {
                        that.codeStatus = false
                        var time = 60
                        var t = setInterval(function () {
                            time--
                            $('.get-captcha').html(time+'s')
                            if(time === 0) {
                                clearInterval(t)
                                $('.get-captcha').html('重新获取')
                                that.codeStatus = true
                            }
                        },1000)
                    }
                },'json')
            },
            checkPaypwd() {
                this.paypwd = this.paypwd.replace(/[^\d]/g, '')
            },
            btnReg() {
                var errorCount = 0
                $('.reg-item input').each(function (i,v) {
                    if(!v.value) {
                        alert('请完善内容！')
                        return false
                    }
                })
                if(this.paypwd.length < 6) {
                    $('#paypwdErr').html('请输入6位支付密码')
                }else {
                    $('#paypwdErr').html('')
                }
                $('.tips').each(function (i,v) {
                    if(v.innerText) {
                        errorCount++
                    }
                })
                if(errorCount > 0) {
                    return
                }
                $.post('/index/person/paypwd',{
                    captcha: this.captcha,
                    paycode: this.paypwd
                },function (res) {
                    console.log(res)
                    if(res.msg === '验证码不正确') {
                        alert('验证码不正确')
                    }else {
                        that.$message({
                            message: '修改成功!',
                            type: 'success',
                            center: true,
                            duration: 2000
                        });
                        setTimeout(() => {
                            location.href = '/index/person/index'
                        }, 2000)
                    }
                },'json')
            }
        }
    });
</script>
{/block}